<template>
  <view v-if="props.list && props.list.length > 0">
    <view class="list-wrapper flex-wrap" v-if="!props.vertical">
      <view class="list-item" v-for="(item, index) in props.list" :key="index" @click="toPage(item)">
        <view class="list-item-img">
          <view class="item-default-img flex-wrap flex-middle flex-center" :style="{
                  background: 'url(' + (item.logoHttpUrl || item.imageHttpUrl) + ') center no-repeat'
              }" v-if="(item.logoHttpUrl || item.imageHttpUrl)">
            <text class="item-default-text ellipsis2" v-if="item.name">{{ item.name }}</text>
          </view>
          <view class="item-default-img flex-wrap flex-middle flex-center" v-else>
            <text class="item-default-text ellipsis2">{{ item.name }}</text>
          </view>
          <view class="list-item-status" v-if="item.examStatus">{{ statusList[item.examStatus] }}</view>
          <view class="abs-tip-left-up" v-if="item.isTop == 1">
            <text class="abs-tip-yellow">置顶</text>
          </view>
        </view>
        <text class="item-title fs-14 fc-333 ellipsis bold">{{ item.name }}</text>
        <view class="item-icon-wrap">
          <text class="fs-12 fc-999">开始时间：{{ item.startDate }}</text>
          <text class="fs-12 fc-999">结束时间：{{ item.endDate || '不限制' }}</text>
        </view>
        <view class="item-data flex-wrap flex-middle">
          <!-- <text class="fs-12 fc-primary flex-item" v-if="item.examStatus === '1' || item.examStatus === '2'">{{statusList[item.examStatus]}}</text>
          <text class="fs-12 fc-999 flex-item" v-else>{{statusList[item.examStatus]}}</text> -->
        </view>
      </view>
    </view>
    <view class="list-wrapper flex-wrap vertical" v-else>
      <view class="list-item flex-wrap flex-middle" v-for="(item, index) in props.list" :key="index" @click="toPage(item)">
        <view class="list-item-img">
          <view class="item-default-img flex-wrap flex-middle flex-center" :style="{
                  background: 'url(' + (item.logoHttpUrl || item.imageHttpUrl) + ') center no-repeat'
              }" v-if="(item.logoHttpUrl || item.imageHttpUrl)">
            <text class="item-default-text ellipsis2" v-if="item.name">{{ item.name }}</text>
          </view>
          <view class="item-default-img flex-wrap flex-middle flex-center" v-else>
            <text class="item-default-text ellipsis2">{{ item.name }}</text>
          </view>
          <view class="list-item-status" v-if="item.examStatus && !props.isCourseExam">{{ statusList[item.examStatus] }}
          </view>
          <view class="abs-tip-left-up" v-if="item.isTop == 1">
            <text class="abs-tip-yellow">置顶</text>
          </view>
        </view>
        <view class="list-right flex-item">
          <text class="item-title fs-14 fc-333 ellipsis bold">
            <span v-if="item.isNewEmployeeTask == 1" class="abs-tip-staff-yellow"
                  style="margin-left: 4px;">新员工</span>{{ item.name }}
          </text>
          <view class="item-icon-wrap">
            <text class="fs-12 fc-999">开始：{{ item.startDate }}</text>
            <text class="fs-12 fc-999">结束：{{ item.endDate || '不限制' }}</text>
            <text class="fs-12 fc-999" v-if="props.isCourseExam">答卷时长：{{
                item.timeLimit ? getTime(item.timeLimit) : "不限制"
              }}
            </text>
          </view>
          <view class="item-data flex-wrap flex-middle">
            <text class="fs-12 fc-999 item-data-item">答卷次数：{{ item.allowNum ? item.allowNum : "不限制" }}</text>
            <text class="fs-12 fc-999 item-data-item">试题数量：{{ item.totalQuestionsNum }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <data-empty></data-empty>
  </view>
</template>

<script setup>
import {ref, onMounted, watch, getCurrentInstance} from 'vue';
const {$api, $uniPush, $toast} = getCurrentInstance().proxy;
import {getTime} from "@/assets/js/util";
import DataEmpty from "@/components/common/DataEmpty.vue";
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  vertical: { // 竖版显示
    type: Boolean,
    default: false
  },
  pageKey: { // 跳转id的key
    type: String,
    default: ''
  },
  progress: { // 是否显示课程学习进度（我的课程有效）
    type: Boolean,
    default: false
  },
  hideReco: {
    type: Boolean,
    default: false
  },
  isCourseExam: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'E'
  },
  examBeginMode: {
    // 是否课程学完才能进入考试
    type: Boolean,
    default: false,
  },
  examBeginStatus: {
    // 是否课程有权学习
    type: Boolean,
    default: false,
  },
  examCtrlMode: {
    // 是否课程已报名或者有权学习
    type: Boolean,
    default: false,
  },
});

/*watch(()=>props.list, (val)=>{
	console.log(`list:` + stringify(val))
}, {immediate: true})*/

const statusList = ref(['未开始', '已开始', '考试中', '已考', '已过期']);

const toPage = (item) => {
  if (props.isCourseExam) {
    if (props.examBeginMode && !props.examBeginStatus) {
      $toast.warning('学完课程才能进入考试');
    } else {
      $uniPush({
        name: 'exam-start-id',
        params: {
          id: item.courseId || item.examId,
        },
        query: {
          type: props.type
        }
      })
    }
  } else {
    $uniPush({
      name: 'exam-start-id',
      params: {
        id: item.courseId || item.examId,
      },
      query: {
        type: props.type
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.list-wrapper {
  flex-wrap: wrap;
  padding-bottom: 4px;

  &.vertical {
    .list-item {
      width: 100%;
      padding: 15px 0;
      align-items: flex-start;

      &:nth-child(2n) {
        margin-left: 0;
      }

      .list-item-img {
        width: 38.4vw;
        height: 21.6vw;
        margin-bottom: 0;

        .item-default-img {
          min-width: 38.4vw;
          width: 38.4vw;
          height: 21.6vw;
        }
      }

      .item-icon-wrap {
        height: 30px;
        line-height: 16px;
        margin: 2px 0 8px;
      }

      .list-right {
        width: calc(100% - 38.4vw - 9px);
        margin-left: 9px;
      }
    }
  }

  .list-item {
    width: calc((100% - 13px) / 2);
    padding: 6px 0 10px;
    position: relative;

    &:nth-child(2n) {
      margin-left: 13px;
    }

    .list-item-img {
      position: relative;
      width: 100%;
      height: 24.8vw;
      margin-bottom: 5px;

      .item-default-img {
        width: 100%;
        height: 24.8vw;
        background: url('/static/image/course-img.png') no-repeat;
        background-size: contain !important;

        .item-default-text {
          font-size: 12px;
          color: #fff;
          text-align: center;
          padding: 0 10px;
        }
      }

      .list-item-status {
        color: #fff;
        font-size: 12px;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 2px 0;
        position: absolute;
        text-align: center;
        z-index: 1;

        &:after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: var(--color);
          opacity: 0.74;
          z-index: -1;
        }
      }

      .abs-tip-left-up {
        position: absolute;
        left: 4px;
        top: 0;
        line-height: 16px;
      }
    }

    .item-icon-wrap {
      height: 20px;

      .item-icon {
        font-size: 10px;
        color: #7F7F7F;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
        background: #F5F5F5;
        border-radius: 2px;

        & + .item-icon {
          margin-left: 4px;
        }
      }
    }

    .item-data {
      height: 35px;

      .item-data-item {
        & + .item-data-item:before {
          content: '|';
          margin: 0 6px;
        }
      }
    }

  }
}
</style>